import React , {useState,useEffect,useCallback} from 'react'

export const useWinSize = ()=>{
    const [size,setsize] = useState({
        height:document.documentElement.clientHeight,
        width:document.documentElement.clientWidth
    })

    const changeSize = useCallback(()=>{
        //usecallback将函数缓存起来，节流
        setsize({
            height:document.documentElement.clientHeight,
            width:document.documentElement.clientWidth
        })
    },[])

    useEffect(()=>{
        //绑定一次页面监听事件 组件销毁时解绑
        window.addEventListener("resize", changeSize);

        return ()=>{
            window.removeEventListener("resize",changeSize)
        }
    },[])
    return size
}

